<template>
  <div class="bg-white">
    <div class="container flex-al">
      <!-- <build-el-bread></build-el-bread> -->
      <div class="con">
        <div class="w100 flex-al" v-margin-top="'60px'">
          <div class="w100">
            <oneTitle title="申报标准"></oneTitle>
          </div>
          <div class="fwb" v-html="details.awardDescription"></div>
          <!-- <p class="shuoming w100">{{explain.text}}</p>
        <div class="w100">
          <build-el-icon-list
            v-for="(item,index) in explain.data"
            :key="index + item.name"
            :icon="item.icon_red"
            :t1="item.name"
            :t2="item.text"
            :color="1"
          ></build-el-icon-list>
          </div>-->
          <div class="w100" v-margin-top="'60px'">
            <oneTitle title="申报流程"></oneTitle>
            <div class="fwb" v-html="details.contestProcess"></div>
            <!-- <div class="flex-row w100 j-sb" style="margin-top:20px">
            <div v-for="(item,index) in circuit.data" :key="index+item.icon" class="flex-row">
              <build-el-icon-list-col :color="1" :icon="item.icon_red" :t1="item.t1" :t2="item.t2"></build-el-icon-list-col>
            </div>
            </div>-->
          </div>

          <div class="flex-row download">
            <img
              src="~@/assets/imgs/xiazai-2.png"
              alt
              srcset
              @click="dialogVisible = true"
            />
            <img
              src="~@/assets/imgs/shangchuan-2.png"
              alt
              srcset
              @click="toUpload"
            />
          </div>
        </div>
      </div>
      <!-- <div v-margin-top="'60px'"></div> -->
    </div>
    <el-dialog
      title="大赛文件下载"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" align="center"> </el-table-column>
        <el-table-column prop="name" label="文件名字" align="center">
        </el-table-column>
        <el-table-column prop="address" label="下载" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="default"
              @click="handDowUp(scope.row.url, scope.row)"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import buildElBread from "@/components/build-el-bread";
import buildElH1 from "@/components/build-el-h1";
import buildElIconList from "@/components/build-el-icon-list";
import buildElIconListCol from "@/components/build-el-icon-list-col";
import JSONData from "@/assets/JSON";
import router from "@/router";
export default {
  components: {
    buildElBread,
    buildElH1,
    buildElIconList,
    buildElIconListCol,
  },
  data() {
    return {
      ...JSONData,
      details: {},
      dialogVisible: false,
      tableData: [],
    };
  },

  async mounted() {
    let res = await this.api.findDownloadFile({ customizeId: 1 });
    this.details = res;
    if (this.details.files) {
      this.tableData = JSON.parse(this.details.files);
    }
  },
  methods: {
    handDowUp(pageUrl, row) {
      if (row.url) {
        location.href = row.url;
      }
      if (row.imgUrl) {
        location.href = row.imgUrl;
      }
    },
    handleClose() {
      this.dialogVisible = false;
    },
    async down() {
      await this.api.downloadFiles();
    },
    toUpload() {
      router.push({
        name: "Upload",
      });
    },
  },
};
</script>
<style lang="less" scoped>
.con {
  width: 100%;
  .shuoming {
    font-size: 14px;
    color: #666666;
    letter-spacing: 0;
    margin-top: -20px;
  }
  .download {
    margin-top: 60px;
    img {
      .pointer;
      width: 173px;
      margin: 0 10px;
      &:first-child {
        // margin-left: 90px;
      }
    }
  }
}
</style>
